<template>
  <div :class="{abc:noActivated}" id="container"></div>
</template>

<script setup lang="ts">
import {ref, reactive, toRefs} from 'vue'
import * as THREE from 'three'
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';

      // const scene = new THREE.Scene();
      // const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

      // const renderer = new THREE.WebGLRenderer();
      // renderer.setSize( window.innerWidth, window.innerHeight );
      // document.body.appendChild( renderer.domElement );

      // const geometry = new THREE.BoxGeometry( 1, 1, 1 );
      // const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
      // const cube = new THREE.Mesh( geometry, material );
      // scene.add( cube );

      // camera.position.z = 5;
      // function animate() {
      //   requestAnimationFrame( animate );
      //   cube.rotation.x += 0.01;
      //   cube.rotation.y += 0.01;
      //   renderer.render( scene, camera );
      // };

      // animate();
    //   console.log(THREE, 'THREE')
    //   const scene = new THREE.Scene();
      var materials = [];
    //   //根据左右上下前后的顺序构建六个面的材质集
      var texture_left = new THREE.TextureLoader().load( '../src/assets/three-left.jpeg' );
      materials.push( new THREE.MeshBasicMaterial( { map: texture_left} ) );

      var texture_right = new THREE.TextureLoader().load( '../src/assets/three-right.jpeg' );
      materials.push( new THREE.MeshBasicMaterial( { map: texture_right} ) );

      var texture_top = new THREE.TextureLoader().load( '../src/assets/three-top.jpg' );
      materials.push( new THREE.MeshBasicMaterial( { map: texture_top} ) );

      var texture_bottom = new THREE.TextureLoader().load( '../src/assets/three-bottom.jpeg' );
      materials.push( new THREE.MeshBasicMaterial( { map: texture_bottom} ) );

      var texture_front = new THREE.TextureLoader().load( '../src/assets/three-front.jpg' );
      materials.push( new THREE.MeshBasicMaterial( { map: texture_front} ) );

      var texture_back = new THREE.TextureLoader().load( '../src/assets/three-back.jpeg' );
      materials.push( new THREE.MeshBasicMaterial( { map: texture_back} ) );

    //   var box = new THREE.Mesh( new THREE.BoxGeometry( 1, 1, 1 ), materials );
    //   box.geometry.scale( 1, 1, -1 );
    //   scene.add(box);

    //   //镜头
    //   const camera = new THREE.PerspectiveCamera(90, document.body.clientWidth / document.body.clientHeight, 0.1, 100);
    //   camera.position.set(0, 0, 0.01);
    //   //渲染器
    //   const renderer = new THREE.WebGLRenderer();
    //   renderer.setSize(document.body.clientWidth, document.body.clientHeight);
    //   document.body.appendChild(renderer.domElement);
    //   //镜头控制器
    //   // var controls = new THREE.OrbitControls(camera, renderer.domElement);
    
    // //一会儿在这里添加3D物体
    // function loop() {
    //   requestAnimationFrame(loop);
    //   renderer.render(scene, camera);
    // }

    // loop();
      // const noActivated  = ref(true)

      const camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 0.01, 10 );
      camera.position.z = 1;
      // camera.position.set(0, 0, 0.1);
      // camera.position.x = 1;
      // camera.position.y = 0;
      // camera.position.set(0, 0, 1);
      camera.lookAt(0, 0, -1);

      const scene = new THREE.Scene();
      scene.background = new THREE.Color('YELLOWGREEN')
      const geometry = new THREE.BoxGeometry(.5, .25, .5);

      const mesh = new THREE.Mesh( geometry, materials );
      mesh.geometry.scale( 1, 1, -1 )
      scene.add( mesh );

      const renderer = new THREE.WebGLRenderer( { antialias: true } );
      renderer.setSize( window.innerWidth, window.innerHeight );
      renderer.setAnimationLoop( animation );
      document.getElementById('app').appendChild( renderer.domElement );

      console.log(OrbitControls, 'OrbitControls')

      new OrbitControls(camera, renderer.domElement);
      function animation(time: number) {
        // mesh.rotation.x = time / 2000;
        // mesh.rotation.y = time / 1000;
        renderer.render( scene, camera );
      }
</script>

<style scoped lang="less">
@violet:#646cffaa;
@coralGreen: #42b883aa;
#app,body {
  margin:0;
  padding:0;
}
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
}
.logo:hover {
  filter: drop-shadow(0 0 2em @violet);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em @coralGreen);
}
div{
  border-radius: 50%;
  width:100px;
  height:100px;
  border: 1px solid #0f0f;
  display: none;
}
.abc {
  background-color: yellowgreen;
  transition:1s background-color ease-in-out;
}
</style>
